<template>
  <div class="comments">
    <div class="coments-wrapper">
      <h2>{{ h2 }}</h2>
      <div class="users">{{ users[active].comment }}</div>
      <div class="comments-active">
        <div
          class="outermost-layer"
          :class="{ active: index === active }"
          v-for="(user, index) in users"
          :key="user.id"
        >
          <div class="avatar-wrapper">
            <img class="avatar" :src="user.url" />
          </div>
          <div class="detail" @click="active = index">
            <div class="name">{{ user.name }}</div>
            <div class="corp">{{ user.crop }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      h2: '他们正在使用',
      users: [
        {
          id: 1,
          name: 'Thomas',
          crop: '小米路由器',
          comment:
            '我们的问卷投放量很大，每次问卷调查都是一次品牌形象宣传，因此除了问卷功能，更注重系统环境的稳定性。在评估后，我们决定选择腾讯问卷，事实证明百万的问卷数据承载毫无压力，可靠！',
          url: 'https://wj.qq.com/image/avatar_thomas.png',
        },
        {
          id: 2,
          name: '315晚会',
          crop: '中央电视台',
          comment:
            '腾讯问卷提供的调查问卷模板可订制化服务，增加了页面趣味性，降低了用户点击成本，问卷的回收率简单轻松翻倍，还收获了不少用户的好评。',
          url: 'https://wj.qq.com/image/avatar_cctv.png',
        },
        {
          id: 3,
          name: '火车票调查',
          crop: '同程网',
          comment:
            '界面简洁轻量，QQ登录即可免费使用，问卷发布快捷方便，再也不用人工处理问卷数据，大大节省了调研成本，是很赞的自助式在线问卷调查服务的平台！',
          url: 'https://wj.qq.com/image/avatar_tongcheng.png',
        },
        {
          id: 4,
          name: '滴滴代驾',
          crop: '滴滴',
          comment:
            '腾讯问卷在编辑方式上更加灵活高效，不同用户环境下的交互体验更友好，前端稳定性、安全性表现尤为优异，为海量车主调研项目提供了可靠的基础支撑，用起来更踏实！！',
          url: 'https://wj.qq.com/image/avatar_didi.png',
        },
        {
          id: 5,
          name: '链家网',
          crop: '链家',
          comment:
            '腾讯问卷的扁平化设计做得很好，交互设计的体验也很棒，在对比多个平台后选择使用腾讯问卷，帮我轻轻松松完成了调研！',
          url: 'https://wj.qq.com/image/avatar_lianjia.png',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.comments {
  background-color: #fafafa;
}
.coments-wrapper {
  width: 1000px;
  box-sizing: border-box;
  margin: auto;
  padding: 0 20px;
}
h2 {
  padding: 35px 0 0;
  color: #999;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.users {
  margin-top: 20px;
  font-size: 16px;
  height: 80px;
  display: block;
  border-bottom: 1px solid #ddd;
}
.comments-active {
  padding: 0 20px;
  text-align: center;
  display: flex;
  vertical-align: top;
  text-align: left;
  opacity: 0.6;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
.outermost-layer {
  display: inline-block;
  position: relative;
}
.outermost-layer.active::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #58a6e7;
}
.avatar-wrapper {
  margin-top: -2px;
  padding-top: 31px;
  margin-right: 7px;
  padding-bottom: 40px;
  display: inline-block;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.detail {
  display: inline-block;
}
.name {
  margin-top: 33px;
  font-size: 14px;
  margin-left: 5px;
}
.corp {
  margin-left: 4px;
  margin-top: 3px;
  font-size: 14px;
  color: #999;
}
</style>
